import { getValidateMessage } from "@/utils/validate-rules/message";
import { DownloadOutlined, InboxOutlined } from "@ant-design/icons";
import { Button, message, Modal, notification } from "antd";
import Dragger from "antd/lib/upload/Dragger";
import React from "react";

export interface FileUploadProps {
    url: string;
    successCallBack?: (res: any) => void;
    [propsName: string]: any;
}

const FileUpload: React.FC<FileUploadProps> = ({ url, successCallBack, ...extraProps }) => {
    const uploadProps = {
        name: 'file',
        multiple: true,
        action: url,
        onChange(info: any) {
            const { response } = info.file;
            if (response) {
                if (response.success) {
                    message.success(`${info.file.name}, ${getValidateMessage('accountingEngine.Upload succeed', true)}.`);
                    successCallBack && successCallBack(response.result)
                } else {
                    notification.error({
                        message: response.message
                    })
                }
            }
        },
    };
    const importFile = () => Modal.confirm({
        title: getValidateMessage('common.import', true),
        icon: null,
        content: <Dragger {...uploadProps}>
            <p className="ant-upload-drag-icon">
                <InboxOutlined />
            </p>
            <p className="ant-upload-text">{getValidateMessage('accountingEngine.Click or Drop the file to the area to upload', true)}</p>
        </Dragger>,
        onOk() {
            console.log('OK');
        },
        onCancel() {
            console.log('Cancel');
        },
    });
    return <Button icon={<DownloadOutlined />} type="primary" {...extraProps} onClick={importFile}>{getValidateMessage('common.import', true)}</Button>;
}

export default FileUpload;